<!-- 混入、vuex备份 -->
<template>
  <div>
    <h2>使用moduls将store分隔成模块</h2>
    <h3>{{$store.state.modua.binge}}</h3>
    <button @click="clickChangeModuls">点我通过commit更改moduls里的binge</button>
    <button @click="clickChangeModulsActions">点我通过actions更改moduls里的binge</button>
    <h4>moduls中的getters中的bingeAdd返回值是：{{$store.getters.bingeAdd}}</h4>

    <br/><hr/>
    <h2>使用store状态管理:{{$store.state.count}}</h2>
    <button @click="addFunc">点击加</button>
    <button @click="jianFunc">点击减</button>
    <button @click="addAuto(5)">加5</button>
    <button @click="addAuto(10)">加10</button>
    <button @click="addData()">增加一条数据</button>
    <hr />
    <h2>使用getters</h2>
    <ul>
      <li v-for="(item,index) in $store.getters.mo20" :key="index">{{item.age}}</li>
    </ul>
    <h4>显示age大于20的数据的个数：{{$store.getters.mo20length}}</h4>
    <hr />
    <h2>getters传参：显示大于age大于16的数据</h2>
    <dd>{{$store.getters.mo20lenthAuto(16)}}</dd>
    <br />
    <br />
    <br />
    <button @click="updataInfor">点击通过mutations修改，响应式修改store中infor信息</button>
    <!-- ，mutations里不可进行异步操作，如需异步操作，必须通过action提交到mutations -->
    <button @click="actiChangeInfor">点击我异步操作，通过action提交到mutations</button>
    <h5>store中infor信息：{{$store.state.infor}}</h5>
  </div>
</template>

<script>
import {  mapActions } from 'vuex'

export default {
  data() {
    return {
    };
  },
  mounted() {
    console.log(this.func1('老刘'))
  },
  methods: {
    ...mapActions(['func1']),
    addFunc() {
      this.$store.commit("increment");
    },
    jianFunc() {
      this.$store.commit("jianNum1");
    },
    // 自定义加多少
    addAuto(nums) {
      this.$store.commit("addNums", nums);
    },
    // 增加一条数据，传入一个对象，风格1
    // addData(){
    //   const obj = {id:'bengzi',age:30}
    //   this.$store.commit('addObjet',obj)
    // }
    addData() {
      // 风格2
      const obj = { id: "heipo", age: 24 };
      this.$store.commit({
        type: "addObjet",
        obj
      });
    },
    // 响应式修改store中state中infor数据
    updataInfor() {
      const addrObj = { addrs: "椆木山" };
      this.$store.commit("upAddr", addrObj);
    },

    // 异步操作，必须通过action更改mutations
    actiChangeInfor() {
      // this.$store.commit('actiChangeInfor')  // 错误语法

      // 不优雅的携带参数
      // this.$store.dispatch('actiChangeInfor',{
      //   message:'我是携带信息',
      //   funName(){
      //     console.log('commit完成');
      //   }
      // })

      // 利用Promise优雅的携带参数
      this.$store
        .dispatch("actiChangeInfor", "dispatch携带的参数文字")
        .then(res => {
          console.log(res);
        });
    },

    // 点击修改moduls中的mutations，（actions存在的意义就是分离异步操作，避免mutations臃肿）
    clickChangeModuls(){
      this.$store.commit('clickChangeModulsBinge','老刘')
    },
    clickChangeModulsActions(){
      this.$store.dispatch('ActionChangeModulsBinge','蹦子')
    }
  }
};
</script>

<style lang='scss' scoped>
//@import '@/assets/'; 引入公共css类
</style>